<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>组织机构树</title>
	<meta name="renderer" content="webkit">	
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">	
	<meta name="apple-mobile-web-app-status-bar-style" content="black">	
	<meta name="apple-mobile-web-app-capable" content="yes">	
	<meta name="format-detection" content="telephone=no">	
	<link rel="stylesheet" type="text/css" href="/bsc/static/common/layui/css/layui.css" media="all">
	<link rel="stylesheet" type="text/css" href="/bsc/static/common/bootstrap/css/bootstrap.css" media="all">
	<link rel="stylesheet" type="text/css" href="/bsc/static/common/global.css" media="all">
	<link rel="stylesheet" type="text/css" href="/bsc/static/css/personal.css" media="all">
</head>
<body>
<section class="layui-larry-box">
			<div class="larry-personal">
				<div class="layui-tab">
				   <form action="" method="post">
						<div class="layui-inline">
							<div class="layui-input-inline">
								<input value="${role_name }" placeholder="请输入角色名称" class="layui-input search_input" name="role_name" type="text">
							</div>
							<a class="layui-btn search_btn">查询</a>
						</div>
						<div class="layui-inline">
							<a class="layui-btn layui-btn-normal newsAdd_btn">添加角色</a>
						</div>
				   </form>		
					<!-- 操作日志 -->
						<table class="layui-table">
							<colgroup>
								<col width="5%">
								<col width="9%">
								<col width="9%">
								<col width="9%">
								<col width="9%">
								<col width="9%">
								<col width="15%">
							</colgroup>
					<thead>
						<tr>
							<th style="text-align:left;">编号</th>
							<th>角色名称</th>
							<th>角色类型</th>
							<th>角色备注</th>
							<th>编辑模式</th>
							<th>创建时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody class="news_content">
						<c:forEach items="${role }" var="r" varStatus="s">
						<tr> 
						   <!--style="display: none;"隐藏  -->
						    <td hidden class="td">${r.role_id }</td>
							<td align="left">${s.index+1 }</td>
							<td>${r.role_name }</td>
							<td>${r.role_type }</td>
							<td>${r.role_remark }</td>
							<td>${r.edit_mode=='0'?'只读':'可编辑' }</td>
							<td><fmt:formatDate value="${r.create_time }" pattern="yyyy-MM-dd"/></td>
							<td>
								<a class="layui-btn layui-btn-mini news_edit"><i class="iconfont icon-edit"></i> 赋权</a>
							</td>
						</tr>
						</c:forEach>
					</tbody>
					</table>
                     <div class="larry-table-page clearfix">
				          <div id="page" class="page"></div>
			         </div>
</section>
<script type="text/javascript" src="/bsc/static/common/layui/layui.js"></script>
<script type="text/javascript" src="/bsc/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/bsc/static/common/bootstrap/js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
	layui.use(['jquery','layer','element','laypage'],function(){
	      window.jQuery = window.$ = layui.jquery;
	      window.layer = layui.layer;
          var element = layui.element(),
              laypage = layui.laypage;
        
        //添加文章
    		//改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
    	   $(window).one("resize",function(){
    			$(".newsAdd_btn").click(function(){
    				var index = layui.layer.open({
    					title : "添加角色和授权",
    					type : 2,
    					content : "/bsc/systemrole/add",
    					success : function(layero, index){
    						setTimeout(function(){
    							layui.layer.tips('点击此处返回角色列表,不自动保存数据 ', '.layui-layer-setwin .layui-layer-close', {
    								tips: 3
    							});
    						},500)
    					}
    				})			
    				layui.layer.full(index);
    			})
    		}).resize();
    	//  查询
     		//  查询
   	   $(".search_btn").click(function(){
   		  // console.log(${dept});
   			document.forms[0].action="/bsc/systemrole/listRole";
   			document.forms[0].submit();
   	   });
          
 });
		
	 
</script>
<link rel="stylesheet" href="/bsc/static/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="/bsc/static/ztree/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="/bsc/static/ztree/js/jquery.ztree.excheck-3.5.min.js"></script>
<script type="text/javascript" src="/bsc/static/ztree/js/jquery.ztree.exedit-3.5.min.js"></script>
<script type="text/javascript">
			var setting = {
				check: {
					enable: true
				},
				data: {
					simpleData: {
						enable: true
					}
				}
			};
			var zNodes; /*=  [
				{ id: 1, pId: 0, name: "随意勾选 1", open: true },
				{ id: 11, pId: 1, name: "随意勾选 1-1", open: true },
				{ id: 111, pId: 11, name: "随意勾选 1-1-1" },
				{ id: 112, pId: 11, name: "随意勾选 1-1-2" },
				{ id: 12, pId: 1, name: "随意勾选 1-2", open: true },
				{ id: 121, pId: 12, name: "随意勾选 1-2-1" },
				{ id: 122, pId: 12, name: "随意勾选 1-2-2" },
				{ id: 2, pId: 0, name: "随意勾选 2", checked: true, open: true },
				{ id: 21, pId: 2, name: "随意勾选 2-1" },
				{ id: 22, pId: 2, name: "随意勾选 2-2", open: true },
				{ id: 221, pId: 22, name: "随意勾选 2-2-1", checked: true },
				{ id: 222, pId: 22, name: "随意勾选 2-2-2" },
				{ id: 23, pId: 2, name: "随意勾选 2-3" }
			]; */
			var role_id;
			
			 $(document).ready(function() {
				 //   给用户角色
		  	    $("body").on("click",".news_edit",function(){
		  	    	role_id=$(this).parents("tr").find(".td").text();
		  	    	$.post("/bsc/systemrole/ztreerole",{"role_id":role_id},function(zNodes){
		  	    		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		  	    	});
		  	 	   $("#myModal").modal("show");
		          })
			});
			//添加权限
				function add(){
					//初始化树
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					var nodes=zTree.getCheckedNodes(true);  //获取复选框改变的值
					var array=[];
					$.each(nodes,function(index,n){
						array.push(n.id);
					});
					var data=array.join(",");
					 $.ajax({
					    	url:"/bsc/systemrole/addrole",
					    	type:"post",
					    	data:{"role_id":role_id,"data":data},
					    	success:function(msg){
					    		alert("保存成功");
					    		//合闭树
					    		$("#myModal").modal("hide");
					    		//parent.parent.location.reload();
					    	}
					     });   
				} 
</script>
<!-- Modal -->
<div class="modal fade" id="myModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="width: 300px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">角色管理</h4>
      </div>
      <div class="modal-body">
          <ul id="treeDemo" class="ztree"></ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="add()">确认</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>